import { PLAY_MODE } from "@/assets/js/constant";
import { useStore } from "vuex";
import { computed, watch, ref } from "vue";
export default function useCD() {
  const cdRef = ref(null);
  const cdImageRef = ref(null);
  const store = useStore();
  const playing = computed(() => store.state.playing);
  const cdCls = computed(() => {
    return playing.value ? "playing" : "";
  });
  watch(playing, (newPlaying) => {
    if (!newPlaying) {
      syncTransform(cdRef.value, cdImageRef.value);
    }
  });
  function syncTransform(wrapper, inner) {
    const wrapperTranform = getComputedStyle(wrapper).transform;
    const innerTransform = getComputedStyle(inner).transform;
    wrapper.style.transform =
      wrapperTranform === "none"
        ? innerTransform
        : innerTransform.concat(" ", wrapperTranform);
  }
  return {
    cdCls,
    cdRef,
    cdImageRef,
  };
}
